<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码生成器</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <div class="top">
        <el-menu class="el-menu-demo" default-active="0" mode="horizontal"
                 style="display: flex;justify-content: center;" @select="selectMenu">
            <el-menu-item index="0">代码生成器</el-menu-item>
        </el-menu>
        <div class="line"></div>
    </div>

    <div class="center">
        <div class="code-gen" v-if="switchTabIndex==0">
            <el-card>
                <div class="top-option">
                    <el-button type="info" plain size="small " @click="drawerGlobal = true">全局项目设置
                    </el-button>
                    <el-button type="info" plain size="small " @click="drawer = true">模板设置</el-button>
                    <el-button type="primary" plain size="small " @click="dialogVisible = true">解析SQL
                    </el-button>
                    <el-upload style="margin: 0 10px;" class="upload-demo" :action="host+'sqlParser/file'"
                               :on-success="sqlParserSuccess" multiple :limit="10" :show-file-list="false">
                        <el-button size="small" type="primary" plain size="small ">导入SQL</el-button>
                    </el-upload>
                    <el-button type="success" plain size="small " @click="generatorCode()">生成代码</el-button>
                    <el-button type="success" plain size="small " @click="exportZip">导出代码</el-button>
                    <el-button type="warning" plain size="small " @click="toAddTable">新增</el-button>
                    <el-button type="danger" plain size="small " @click="doDelTable">删除</el-button>
                </div>
                <div class="grid-content bg-purple">
                    <div>
                        <el-table :data="appData.dataModelDto.tableStructures" ref="multipleTable"
                                  style="width: 100%" border @selection-change="selectRow">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column prop="date" label="表名">
                                <template slot-scope="scope">
                                    <el-input size="small"
                                              v-model="appData.dataModelDto.tableStructures[scope.$index].tableName">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="表描述">
                                <template slot-scope="scope">
                                    <el-input size="small"
                                              v-model="appData.dataModelDto.tableStructures[scope.$index].tableComment">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="去除前缀">
                                <template slot-scope="scope">
                                    <el-input size="small"
                                              v-model="appData.dataModelDto.tableStructures[scope.$index].prefix">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="200">
                                <template slot-scope="scope">
                                    <el-button
                                            @click.native.prevent="showTableDetail(scope.$index, appData.dataModelDto.tableStructures[scope.$index])"
                                            type="text" size="small">
                                        详细表结构
                                    </el-button>
                                    <el-button
                                            @click.native.prevent="generatorMockData(scope.$index, appData.dataModelDto.tableStructures[scope.$index])"
                                            type="text" size="small">
                                        生成模拟数据
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-card>
        </div>

        <div class="code-gen" v-if="switchTabIndex==1 || switchTabIndex==2">
            <el-card>
                <div class="grid-content bg-purple">
                    <div>
                        <div class="table-info">
                            <el-input size="small" v-model="selectTableStructure.tableName"
                                      style="margin-right: 20px;">
                                <template slot="prepend">表名</template>
                            </el-input>
                            <el-input size="small" v-model="selectTableStructure.tableComment">
                                <template slot="prepend">表描述</template>
                            </el-input>
                        </div>
                    </div>
                </div>
                <div>
                    <el-table :data="selectTableStructure.tableFields" style="width: 100%" border>
                        <el-table-column prop="date" label="字段名" width="180">
                            <template slot-scope="scope">
                                <el-input size="small"
                                          v-model="selectTableStructure.tableFields[scope.$index].fieldName">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="字段类型" width="200">
                            <template slot-scope="scope">
                                <el-input size="small"
                                          v-model="selectTableStructure.tableFields[scope.$index].fieldType">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="字段描述">
                            <template slot-scope="scope">
                                <el-input size="small"
                                          v-model="selectTableStructure.tableFields[scope.$index].fieldComment">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="主键">
                            <template slot-scope="scope">
                                <el-switch v-model="selectTableStructure.tableFields[scope.$index].primaryKey"
                                           active-text="是" inactive-text="否">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="120">
                            <template slot-scope="scope">
                                <el-button
                                        @click.native.prevent="deleteRow(scope.$index, selectTableStructure.tableFields)"
                                        type="text" size="small">
                                    移除
                                </el-button>
                                <el-button
                                        @click.native.prevent="addRow(scope.$index, selectTableStructure.tableFields)"
                                        type="text" size="small">
                                    新增
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="table-info-bottom">
                    <el-button @click="toBack" plain size="small">
                        返回
                    </el-button>
                    <el-button @click="doAddTable" plain type="primary" size="small" v-if="switchTabIndex==2">
                        新增
                    </el-button>
                </div>
            </el-card>
        </div>

        <div class="code-gen" v-if="switchTabIndex == 3">
            <el-card>
                <div class="grid-content bg-purple">
                    <div>
                        <div class="table-info">
                            <div class="" style="width: 50%;display: flex;">
                                <span style="width: 40px;font-size: 14px;line-height: 30px;">表名</span>
                                <el-input size="small" v-model="selectTableStructure.tableName"
                                          style="margin-right: 20px;"></el-input>
                            </div>
                            <div class="" style="width: 50%;">
                                <span style="width: 100px;font-size: 14px;line-height: 30px;">生成条数</span>
                                <el-input-number size="mini" style="width: 120px;" v-model="rowNum">
                                </el-input-number>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <el-table :data="selectTableStructure.tableFields" style="width: 100%" border>
                        <el-table-column prop="date" label="字段名" width="180">
                            <template slot-scope="scope">
                                <el-input size="small"
                                          v-model="selectTableStructure.tableFields[scope.$index].fieldName">
                                </el-input>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="字段描述" width="180">
            <template slot-scope="scope">
                <label>{{selectTableStructure.tableFields[scope.$index].fieldComment}}</label>
            </template>
        </el-table-column> -->
                        <el-table-column label="主键" width="50">
                            <template slot-scope="scope">
                                <el-checkbox
                                        v-model="selectTableStructure.tableFields[scope.$index].primaryKey">
                                </el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column label="非空" width="50">
                            <template slot-scope="scope">
                                <el-checkbox v-model="selectTableStructure.tableFields[scope.$index].notNull">
                                </el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column label="自增" width="50">
                            <template slot-scope="scope">
                                <el-checkbox
                                        v-model="selectTableStructure.tableFields[scope.$index].autoIncrement">
                                </el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column label="模拟类型">
                            <template slot-scope="scope">

                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <div class="select-menu">
                                            <span>模拟类型:</span>
                                            <el-dropdown split-button size="mini" trigger="click"
                                                         @command="selectMockType($event,selectTableStructure.tableFields[scope.$index])"
                                                         style="margin-right: 20px;">
														<span class="el-dropdown-link">
															{{selectTableStructure.tableFields[scope.$index].mockType||'不模拟'}}
														</span>
                                                <el-dropdown-menu slot="dropdown">
                                                    <el-dropdown-item command="固定">固定</el-dropdown-item>
                                                    <el-dropdown-item command="随机">随机</el-dropdown-item>
                                                    <el-dropdown-item command="递增">递增</el-dropdown-item>
                                                    <el-dropdown-item command="规则">规则</el-dropdown-item>
                                                    <el-dropdown-item command="不模拟">不模拟</el-dropdown-item>
                                                </el-dropdown-menu>
                                            </el-dropdown>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="select-menu"
                                             v-if="selectTableStructure.tableFields[scope.$index].mockType=='固定'">
                                            <span>固定值:</span>
                                            <el-input size="mini" placeholder="请输入固定值"
                                                      v-model="selectTableStructure.tableFields[scope.$index].mockParams"
                                                      style="width: 140px;">
                                            </el-input>
                                        </div>

                                        <div class="select-menu"
                                             v-if="selectTableStructure.tableFields[scope.$index].mockType=='随机'">
                                            <span>随&nbsp;&nbsp;&nbsp;机:</span>
                                            <el-select size="mini" style="width: 140px;"
                                                       v-model="selectTableStructure.tableFields[scope.$index].mockParams"
                                                       placeholder="请选择">
                                                <el-option v-for="value in options" :key="value" :label="value"
                                                           :value="value">
                                                </el-option>
                                            </el-select>
                                        </div>

                                        <div class="select-menu"
                                             v-if="selectTableStructure.tableFields[scope.$index].mockType=='递增'">
                                            <span>起始值:</span>
                                            <el-input-number size="mini"
                                                             v-model="selectTableStructure.tableFields[scope.$index].mockParams"
                                                             style="width: 120px;">
                                            </el-input-number>
                                        </div>

                                        <div class="select-menu"
                                             v-if="selectTableStructure.tableFields[scope.$index].mockType=='规则'">
                                            <span>规&nbsp;&nbsp;&nbsp;则:</span>
                                            <el-input size="mini" placeholder="请输入正则表达式"
                                                      v-model="selectTableStructure.tableFields[scope.$index].mockParams"
                                                      style="width: 140px;">
                                            </el-input>
                                        </div>
                                    </el-col>
                                </el-row>

                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="150">
                            <template slot-scope="scope">
                                <el-button
                                        @click.native.prevent="deleteRow(scope.$index, selectTableStructure.tableFields)"
                                        type="text" size="small">
                                    移除
                                </el-button>
                                <el-button
                                        @click.native.prevent="addRow(scope.$index, selectTableStructure.tableFields)"
                                        type="text" size="small">
                                    新增
                                </el-button>
                                <el-button @click="generatorMockSql" type="text" size="small">
                                    生成
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="table-info-bottom">
                    <el-button @click="toBack" plain size="small">
                        返回
                    </el-button>
                    <el-button @click="generatorMockSql" plain type="primary" size="small">
                        生成
                    </el-button>
                </div>
            </el-card>
        </div>
    </div>
    <div class="create-by el-card box-card is-always-shadow">
        By ZhangRen
    </div>

    <div>
        <el-drawer :visible.sync="drawer" direction="ttb" :with-header="false" size="75%">
            <div id="" style="position: relative;height: 100%;">
                <el-tabs tab-position="left" style="height: 75%;padding: 20px;" v-model="templateType">
                    <el-tab-pane :label="item.templateType" v-for="(item,index) in templates"
                                 :name="item.templateType">
                        <el-tabs type="border-card" v-if="isTemplate">
                            <el-tab-pane v-for="(t,index) in item.templateList">
										<span slot="label">
											<el-checkbox v-model="t.selected">&nbsp</el-checkbox>{{t.templateName}}
										</span>

                                <div>
                                    <el-input type="textarea" :rows="20" v-model="t.templateContent">
                                    </el-input>
                                </div>

                            </el-tab-pane>
                        </el-tabs>

                        <el-tabs type="border-card" v-if="!isTemplate">
                            <el-tab-pane v-for="(c,index) in contents">
										<span slot="label">
											{{c.fileName}}
											<el-button size="mini" @click="copy(c.value)">复制</el-button>
										</span>

                                <div>
                                    <el-input type="textarea" :rows="20" v-model="c.value"></el-input>
                                </div>

                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                </el-tabs>

                <div id=""
                     style="display: flex;justify-content: center;position: absolute;bottom: 10px;width: 100%;">
                    <el-button @click="isTemplate = true" plain size="small" v-if="!isTemplate">返回</el-button>
                    <el-button @click="generatorCode()" plain type="primary" size="small" v-if="isTemplate">直接生成
                    </el-button>
                    <el-button @click="templateAllSelect()" plain size="small" v-if="isTemplate">全选
                    </el-button>
                    <el-button @click="templateReverseSelect()" plain size="small" v-if="isTemplate">反选
                    </el-button>
                    <el-button @click="drawer = fals" plain size="small" v-if="isTemplate">取消
                    </el-button>
                </div>
            </div>
        </el-drawer>

        <el-drawer :visible.sync="drawerGlobal" direction="ttb" :with-header="false" size="75%">
            <div id="" style="position: relative;height: 100%;padding-top: 50px;margin: 0 auto;width: 60%;">
                <div>
                    全局项目配置
                    <el-divider></el-divider>
                    <div style="padding-bottom: 40px;">
                        <div class="table-info">
                            <el-input size="small" v-model="appData.dataModelDto.project.projectName"
                                      style="margin-right: 20px;">
                                <template slot="prepend">项目名</template>
                            </el-input>
                            <el-input size="small" v-model="appData.dataModelDto.project.moduleName"
                                      style="margin-right: 20px;">
                                <template slot="prepend">模块名</template>
                            </el-input>
                        </div>
                        <div class="table-info">
                            <el-input size="small" v-model="appData.dataModelDto.project.packageName"
                                      style="margin-right: 20px;">
                                <template slot="prepend">包&nbsp&nbsp&nbsp名</template>
                            </el-input>
                            <el-input size="small" v-model="appData.dataModelDto.project.version"
                                      style="margin-right: 20px;">
                                <template slot="prepend">版本号</template>
                            </el-input>
                        </div>
                    </div>
                    全局开发者信息配置
                    <el-divider></el-divider>
                    <div class="table-info">
                        <el-input size="small" v-model="appData.dataModelDto.developer.author"
                                  style="margin-right: 20px;">
                            <template slot="prepend">作者</template>
                        </el-input>
                        <el-input size="small" v-model="appData.dataModelDto.developer.email">
                            <template slot="prepend">邮箱</template>
                        </el-input>
                    </div>
                </div>
                <div id=""
                     style="display: flex;justify-content: center;position: absolute;bottom: 10px;width: 100%;">
                    <el-button @click="drawerGlobal = false" plain size="small">取消</el-button>
                    <el-button @click="drawerGlobal = false" plain type="primary" size="small">确认</el-button>
                </div>
            </div>
        </el-drawer>

        <!-- 模拟sql -->
        <el-drawer :visible.sync="drawerInsertSql" direction="ttb" :with-header="false" size="75%">
            <div id="" style="position: relative;height: 100%;padding-top: 50px;margin: 0 auto;width: 75%;">
                <div style="display: flex; justify-content: end;">
                    <el-button type="text" size="mini" @click="copy(mockInsertSql)">一键复制</el-button>
                </div>
                <el-input type="textarea" :rows="20" placeholder="" v-model="mockInsertSql">
                </el-input>
            </div>
            <div id=""
                 style="display: flex;justify-content: center;position: absolute;bottom: 10px;width: 100%;">
                <el-button size="small" plain @click="drawerInsertSql = false">取 消</el-button>
                <el-button size="small" plain type="primary" @click="copy(mockInsertSql)">一键复制</el-button>
            </div>
        </el-drawer>

        <!-- 解析sql -->
        <el-dialog title="解析sql" :visible.sync="dialogVisible" width="40%">
            <el-input type="textarea" :rows="16" placeholder="请输入SQL" v-model="createSql">
            </el-input>
            <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
						<el-button size="small" plain @click="dialogVisible = false">取 消</el-button>
						<el-button size="small" plain type="primary" @click="parserSqlText()">确 定</el-button>
					</span>
        </el-dialog>

    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            host: '',
            templateType: "",
            isTemplate: true,
            dialogVisible: false,
            drawer: false,
            drawerGlobal: false,
            drawerInsertSql: false,
            switchTabIndex: 0, //0=表结构列表 1=表结构详情 2=全局项目配置 3=全局开发者信息配置
            createSql: "",
            contents: [],
            templates: [],
            options: ["字符串", "人名", "城市", "网址", "邮箱", "IP", "整数", "小数", "大学", "日期", "时间戳", "手机号"],
            rowNum: 100, //模拟数据生成条数
            selectTableStructure: {},
            mockInsertSql: '',
            appData: {
                dataModelDto: {
                    project: {
                        packageName: "",
                        packagePath: "",
                        moduleName: "",
                        projectName: ""
                    },
                    developer: {
                        author: "",
                        datetime: "",
                        email: ""
                    },
                    tableStructures: []
                }
            }
        },
        methods: {
            selectMenu(index) {
                this.switchTabIndex = index;
            },
            copy(value) {
                const save = function(e) {
                    e.clipboardData.setData('text/plain', value)
                    e.preventDefault() // 阻止默认行为
                }
                document.addEventListener('copy', save) // 添加一个copy事件
                document.execCommand('copy') // 执行copy方法
                this.$message({
                    message: '复制成功',
                    type: 'success'
                })
            },
            echoCheckRow() {
                this.$nextTick(() => {
                    setTimeout(() => {
                    this.appData.dataModelDto.tableStructures.forEach(row => {
                        if (row.selected) {
                        this.$refs.multipleTable.toggleRowSelection(row, true);
                    }
                })
                }, 100)
            })
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
                if (rows.length < 1) {
                    this.addRow(index, rows);
                }
            },
            addRow(index, rows) {
                let addItem = {
                    fieldName: "",
                    fieldType: "",
                    fieldComment: "",
                    attrName: "",
                    attrNameUppercase: "",
                    attrType: "",
                    primaryKey: false
                }
                rows.splice(index, 0, addItem);
            },
            showTableDetail(index, row) {
                this.selectTableStructure = row;
                this.switchTabIndex = 1;
            },
            toAddTable() {
                this.selectTableStructure = {
                    selected: true,
                    tableName: "",
                    tableComment: "",
                    classNameUppercase: "",
                    className: "",
                    tableFields: [{
                        fieldName: "",
                        fieldType: "",
                        fieldComment: "",
                        attrName: "",
                        attrNameUppercase: "",
                        attrType: "",
                        primaryKey: false
                    }]
                }
                this.switchTabIndex = 2;
            },
            doAddTable() {
                this.appData.dataModelDto.tableStructures.push(this.selectTableStructure);
                this.toBack();
            },
            doDelTable() {
                let data = this.appData.dataModelDto.tableStructures.filter(e => e.selected);
                if (data.length == 0) {
                    this.$message({
                        message: '请至少选择一条数据',
                        type: 'warning'
                    });
                    return;
                }
                this.appData.dataModelDto.tableStructures = this.appData.dataModelDto.tableStructures.filter(e =>!e.selected);
            },
            selectRow(selection) {
                this.appData.dataModelDto.tableStructures.forEach(e => {
                    e.selected = false;
                selection.forEach(x => {
                    if (x.tableName == e.tableName) {
                    e.selected = true;
                }
            })
            })
            },
            toBack() {
                this.echoCheckRow();
                this.switchTabIndex = 0;
            },
            parserSqlText() {
                axios.post(this.host + "sqlParser/text", {
                    sql: this.createSql
                }).then((res) => {
                    let response = res.data;
                if (!response.ok) {
                    this.$message({
                        message: response.messageDetail,
                        type: 'warning'
                    });
                    return;
                }
                response.data.forEach(e => {
                    e.selected = false;
                this.appData.dataModelDto.tableStructures.push(e);
            });
                this.dialogVisible = false;
            });
            },
            sqlParserSuccess(response, file, fileList) {
                if (!response.ok) {
                    this.$message({
                        message: response.messageDetail,
                        type: 'error'
                    });
                    return;
                }
                response.data.forEach(e => {
                    e.selected = false;
                this.appData.dataModelDto.tableStructures.push(e);
            });
                this.saveLocal();
            },
            generatorMockData(index, row) {
                this.selectTableStructure = row;
                this.switchTabIndex = 3;
            },
            generatorCode(index, tableStructures) {
                let data = this.checkGenerator();
                if (!data) {
                    return;
                }
                axios.post(this.host + "generator/text", {
                        ...data
            }).then((res) => {
                    let response = res.data;
                if (!response.ok) {
                    this.$message({
                        message: response.messageDetail,
                        type: 'error'
                    });
                    return;
                }
                this.contents = response.data;
                this.isTemplate = false;
                this.drawer = true;
            })
            },
            checkGenerator() {
                let data = JSON.parse(JSON.stringify(this.appData));
                let dataSelected = data.dataModelDto.tableStructures.filter(e => e.selected);
                if (dataSelected.length == 0) {
                    this.$message({
                        message: '请至少选择一条数据',
                        type: 'warning'
                    });
                    return false;
                }
                data.dataModelDto.tableStructures = data.dataModelDto.tableStructures.filter(e => e.selected);
                data.dataModelDto.tableStructures.forEach(e => {
                    if (
                !e.tableComment
            ) {
                    this.$message({
                        message: '表描述不能为空！',
                        type: 'warning'
                    });
                    throw Error("表描述不能为空");
                }
                if (!e.tableName) {
                    this.$message({
                        message: '表名不能为空！',
                        type: 'warning'
                    });
                    throw Error("表名不能为空");
                }
                if (!e.tableFields) {
                    this.$message({
                        message: '表字段列表不能为空！',
                        type: 'warning'
                    });
                    throw Error("表字段列表不能为空");
                }
                e.tableFields.forEach(x => {
                    if (
                !x.fieldName
            ) {
                    this.$message({
                        message: '表字段名不能为空！',
                        type: 'warning'
                    });
                    throw Error("表字段名不能为空");
                }
            })
            })
                this.templates.forEach(e => {
                    if (e.templateType == this.templateType) {
                    data.templateList = e.templateList.filter(x => x.selected);
                }
            })
                return data;
            },
            exportZip(index, tableStructures) {
                let data = this.checkGenerator();
                if (!data) {
                    return;
                }
                axios.post(this.host + "generator/zip", {
                        ...data
            }, {
                    responseType: 'blob'
                })
            .
                then((res) => {
                    const {
                        data,
                        headers
                    } = res;
                const fileName =
                        "code.zip" //headers['content-disposition'].replace(/\w+; *filename=(.*)/, '$1')
                // 此处当返回json文件时需要先对data进行JSON.stringify处理，其他类型文件不用做处理
                //const blob = new Blob([JSON.stringify(data)], ...)
                const blob = new Blob([data], {
                    type: headers['content-type']
                })
                let dom = document.createElement('a')
                let url = window.URL.createObjectURL(blob)
                dom.href = url
                dom.download = decodeURI(fileName)
                dom.style.display = 'none'
                document.body.appendChild(dom)
                dom.click()
                dom.parentNode.removeChild(dom)
                window.URL.revokeObjectURL(url)
            }).
                catch((err) => {})
            },
            selectMockType(e, row) {
                row.mockParams = '';
                row.mockType = e;
            },
            selectRomdomMockParams(e, row) {
                row.mockParams = e;
            },
            templateAllSelect() {
                this.templates.forEach(e => {
                    if (e.templateType == this.templateType) {
                    e.templateList.forEach(x => x.selected = true);
                }
            })
            },
            templateReverseSelect() {
                this.templates.forEach(e => {
                    if (e.templateType == this.templateType) {
                    e.templateList.forEach(x => x.selected = !x.selected);
                }
            })
            },
            getTemplates() {
                axios.get(this.host + "template/list", {}).then((res) => {
                    let response = res.data;
                if (!response.ok) {
                    this.$message({
                        message: response.messageDetail,
                        type: 'warning'
                    });
                    return;
                }
                response.data.forEach((e, index) => {
                    if (index == 0) {
                    this.templateType = e.templateType;
                }
                e.templateList.forEach(x => {
                    x.selected = true;
            })
            });
                this.templates = response.data;
            });
            },
            generatorMockSql() {
                let mockData = {
                    rowNum: this.rowNum,
                    tableStructure: this.selectTableStructure
                }
                axios.post(this.host + "generator/mockSql", mockData).then((res) => {
                    let response = res.data;
                if (!response.ok) {
                    this.$message({
                        message: response.messageDetail,
                        type: 'error'
                    });
                    return;
                }
                this.mockInsertSql = response.data;
                this.drawerInsertSql = true;
            });
            },
            saveLocal() {
                localStorage.setItem('initData', JSON.stringify(this.appData));
            },
            takeLocal() {
                let appData = JSON.parse(localStorage.getItem('initData'));
                if (appData) {
                    this.appData = appData;
                }
                this.echoCheckRow();
            }
        },
        created() {
            this.takeLocal();
            this.getTemplates();
            setInterval(_ => {
                console.log("定期本地保存", this.appData)
            this.saveLocal();
        },
            10 * 1000
        )
        }
    });
</script>
<style>
    #app {
        padding-left: 100px;
        padding-right: 100px;
    }

    .center {
        padding-top: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .code-gen {
        width: 60%;
        margin: 0 auto;
        padding-bottom: 10px;
        max-height: 88vh;
        overflow: auto;
    }

    .top-option {
        display: flex;
        padding-bottom: 20px;
    }

    .table-info {
        display: flex;
        padding-bottom: 20px;
    }

    .table-info-bottom {
        padding-top: 10px;
        display: flex;
        justify-content: center;
    }

    .create-by {
        display: inline;
        padding: 4px;
        font-size: 14px;
        position: fixed;
        bottom: 10px;
        right: 10px;
    }

    .el-collapse-item__content {
        padding-bottom: 0px;
    }

    .select-menu {
        display: flex;
        align-items: center;
    }

    .select-menu>span {
        margin-right: 5px;
    }

    .el-divider--horizontal {
        margin: 10px 0;
    }
</style>
</body>
</html>
